<template>
  <div class="admin-container">
    <!-- <div class="container-1200"> -->
      <div class="flexWithJusBetween">
        <div class="title mg-B20">企业信息表</div>
        <!-- <div>
          <el-button type="primary" @click="addCompany">添加企业</el-button>
          <el-button type="primary" @click="editCompany">修改企业信息</el-button>
          <el-button type="primary" @click="toProject">查看企业项目</el-button>
        </div> -->
      </div>

      <div style="border: solid 1px black">
        <el-row>
          <el-col :span="4">企业名称</el-col>
          <el-col :span="8">{{ companyInfo.name }}</el-col>
          <el-col :span="4">营业执照</el-col>
          <el-col :span="8">
             <el-link
              :href="companyInfo.code"
              target="_blank"
              v-if="companyInfo.code"
              >点击查看营业执照</el-link
            > </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">法定代表人</el-col>
          <el-col :span="8">{{ companyInfo.legalPerson }}</el-col>
          <el-col :span="4">注册资本(万元)</el-col>
          <el-col :span="8">{{ companyInfo.capital }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">负责人</el-col>
          <el-col :span="8">{{ companyInfo.linkman }}</el-col>
          <el-col :span="4">负责人联系方式</el-col>
          <el-col :span="8">{{ companyInfo.phone }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">注册地址</el-col>
          <el-col :span="8">{{ companyInfo.registerAddress }}</el-col>
          <el-col :span="4">办公地址</el-col>
          <el-col :span="8">{{ companyInfo.officeAddress }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">行业类别</el-col>
          <el-col :span="8">{{ companyInfo.industry }}</el-col>
          <el-col :span="4">注册类型</el-col>
          <el-col :span="8">{{
            registrationFormate(companyInfo.registration)
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">纳税类型</el-col>
          <el-col :span="8">{{ taxTypeFormate(companyInfo.taxType) }}</el-col>
          <el-col :span="4">驳回说明</el-col>
          <el-col :span="8">{{ companyInfo.memo }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">是否删除</el-col>
          <el-col :span="8">{{ companyInfo.deleted }}</el-col>
          <el-col :span="4">所属部门</el-col>
          <el-col :span="8">{{ companyInfo.officeId }}</el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="4">用户ID</el-col>
          <el-col :span="8">{{ companyInfo.user_id }}</el-col> -->
          <el-col :span="4">相关资料</el-col>
          <el-col :span="20">
            <div v-for="(item, index) in companyInfo.meta" :key="index">
              <el-link :href="item.url" target="_blank" type="primary">({{
                item.name
              }})</el-link>
            </div></el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="4">创建者</el-col>
          <el-col :span="8">{{companyInfo.createBy}}</el-col>
          <el-col :span="4">更新者</el-col>
          <el-col :span="8">{{companyInfo.modifyBy}}</el-col>
        </el-row> -->
      </div>
    <!-- </div> -->
  </div>
</template>

<script>
import { find as companyFind } from "@/api/company";
import { list as dictList } from "@/api/dict";
import utils from "@/utils/utils.js";

export default {
  components: {},
  name: "company",
  data() {
    return {
      companyId:"",
      companyInfo: {
        code: "",
        name: "",
        legalPerson: "",
        capital: "",
        linkman: "",
        phone: "",
        registerAddress: "",
        officeAddress: "",
        industry: "",
        registration: "",
        taxType: "",
        status: "",
        memo: "",
        deleted: "",
        officeId: "",
        userId: "",
        meta: "",
        createBy: "",
        modifyBy: "",
      },

      //字典数据
      taxTypeDict: [],
      registrationDict: [],

      //获取字典的promise
      taxTypeDictPromise: "",
      registrationDictPromise: "",
    };
  },
  watch: {
    $route: {
      handler: function (route) {},
      immediate: true,
    },
  },

  created() {
    
    this.taxTypeDictPromise = this.getDictList("tax_type", (res) => {
      this.taxTypeDict = res.data;
    });
    this.registrationDictPromise = this.getDictList("registration", (res) => {
      this.registrationDict = res.data;
    });
  },

  mounted() {
    if (this.$route.query) {
      this.companyId = this.$route.query.companyId;
    }
    Promise.all([this.taxTypeDictPromise, this.registrationDictPromise]).then(
      (res) => {
        //console.log("字典已经全部加载完成--");
        this.companyFind(this.companyId);
      }
    );
  },

  destroyed() {},

  methods: {
    //获取公司信息
    companyFind(id) {
      companyFind(id).then((res) => {
        console.log("获取公司信息res--", res);
        if (res.type == "success") {
          this.companyInfo = res.data.company;
          if (!utils.isNull(this.companyInfo.meta)) {
            this.companyInfo.meta = JSON.parse(this.companyInfo.meta);
          }
        }
      });
    },

    //创建企业
    addCompany() {
      this.$router.push({ path: "/company/add" });
    },

    //修改企业信息
    editCompany() {
      this.$router.push({ path: "/company/edit", query:{companyId: this.companyInfo.id} });
    },

    //查看企业项目
    toProject() {
      this.$router.push({ path: "/project/list", query:{companyId: this.companyInfo.id} });
    },

    //字典信息获取
    getDictList(type, callback, errCallback) {
      let params = new URLSearchParams();
      params.append("dictType", type);
      return dictList(params)
        .then((res) => {
          console.log(type + "字典--", res);
          if (res.type == "success") {
            if (callback) {
              callback(res.data);
            }
          }
        })
        .catch((err) => {
          if (errCallback) {
            errCallback();
          }
        });
    },

    //字典数据格式化
    taxTypeFormate(data) {
      return utils.selectDictLabel(this.taxTypeDict, data);
    },

    registrationFormate(data) {
      return utils.selectDictLabel(this.registrationDict, data);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-col {
  border: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  border-collapse: collapse !important;
}

.leftAlign-pd30 {
  justify-content: left;
  padding-left: 30px;
}
.leftAlign-pd40 {
  justify-content: left;
  padding-left: 40px;
}
.leftAlign-pd80 {
  justify-content: left;
  padding-left: 80px;
}
</style>
